<template>
  <div class="edit-popup">
    <la-dialog
      ref="popupRef"
      title="设置存储"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="120px"
        :rules="formRules"
      >
        <el-form-item label="存储方式" prop="engine">
          <div>
            <el-radio model-value>{{ getStorageInfo?.name }} </el-radio>
            <div class="form-tips">{{ getStorageInfo?.tips }}</div>
          </div>
        </el-form-item>
        <div v-if="formData.engine !== 'local'">
          <el-form-item label=" 存储空间名称" prop="bucket">
            <div class="flex-1">
              <el-input
                v-model="formData.bucket"
                placeholder="请输入存储空间名称(Bucket)"
                clearable
              />
            </div>
          </el-form-item>
          <el-form-item label="ACCESS_KEY" prop="access_key">
            <el-input
              v-model="formData.access_key"
              placeholder="请输入ACCESS_KEY(AK)"
              clearable
            />
          </el-form-item>
          <el-form-item label="SECRET_KEY" prop="secret_key">
            <el-input
              v-model="formData.secret_key"
              placeholder="请输入SECRET_KEY(SK)"
              clearable
            />
          </el-form-item>
          <el-form-item label="空间域名" prop="domain">
            <div class="flex-1">
              <div>
                <el-input
                  v-model="formData.domain"
                  placeholder="请输入空间域名(Domain)"
                  clearable
                />
              </div>
              <div class="form-tips">
                请补全http://或https://，例如https://static.cloud.com
              </div>
            </div>
          </el-form-item>
          <el-form-item
            v-if="formData.engine == StorageEnum.QCLOUD"
            label="REGION"
            prop="region"
          >
            <el-input
              v-model="formData.region"
              placeholder="请输入region"
              clearable
            />
          </el-form-item>
        </div>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
<script>
import api from '@/lnk/admin/api'
import laDialog from "@/lnk/components/la-dialog/index.vue";
export default {
  components: {
    laDialog,
  },
  data() {
    return {
      loading: false,
      lists: [],
      StorageEnum: {
        LOCAL: "local", // 本地
        QINIU: "qiniu", // 七牛云
        ALIYUN: "aliyun", // 阿里云OSS
        QCLOUD: "qcloud", // 腾讯云OSS
      },
      formData: {
        engine: "",
        bucket: "",
        access_key: "",
        secret_key: "",
        domain: "",
        region: "", // 腾讯云需要
        status: 0,
      },
      getStorageInfo: {},
    };
  },
  methods: {
    open(engine) {
      this.formData.engine = engine;
      this.getDetail()
      this.$refs.popupRef.open();
    },
    /**
     * 详情
     */
    async getDetail() {
      const _this = this;
      const data = await api.storage.detail({
        engine: this.formData.engine,
      });
      for (const key in data) {
        this.formData[key] = data[key];
      }
    },
    async handleSubmit(){
       
        const res = await api.storage.setup(this.formData)
        this.$refs.popupRef.close()
        this.$emit('success')
    }
  },
};
</script>
